
import React, { useState, useEffect } from 'react';
import { Button, Modal } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ReactMarkdown from 'react-markdown';
import { useModel } from 'umi';
import 'github-markdown-css';
import TextArea from 'antd/lib/input/TextArea';
import { queryMarkdown } from '@/services/menu';


const docMarkdownDefaultPage: React.FC<{}> = (props: any) => {
  const [modal1Visible, setModal1Visible] = useState(false);
  const [markdownData, setMarkdownData] = useState('');
  const { initialState } = useModel('@@initialState');

  if (!initialState || !initialState.settings) {
    return null;
  }
  var apiKey = '';
  const fetchMarkdownDoc = (apiKey: string) => {
    queryMarkdown(apiKey).then(response => {
      setMarkdownData(response);
    })
  }

  const queryInfo = props.location.query;
  if (queryInfo != undefined && queryInfo.key != undefined) {
    apiKey = queryInfo.key;
  }
  useEffect(() => {
    fetchMarkdownDoc(apiKey);
  }, [apiKey])

  const showMarkdownCode = () => {
    setModal1Visible(true);
  }

  return (
    <PageHeaderWrapper title="markdown文档查看" content='以markdown格式查看所有接口信息.'>
      {/* { <ReactMarkdown source={testMd} escapeHtml={true} className="markdown-body" />} */}
      <Button type="primary" onClick={showMarkdownCode} style={{ float: 'right' }}>查看markdown代码</Button>
      <Modal
        title="markdown代码"
        style={{ top: 20 }}
        visible={modal1Visible}
        width='80%'
        onOk={() => setModal1Visible(false)}
        onCancel={() => setModal1Visible(false)}
      >
        <TextArea autoSize={{ minRows: 9, maxRows: 20 }} value={markdownData} />
      </Modal>
      {<ReactMarkdown source={markdownData} escapeHtml={true} className="markdown-body" />}
    </PageHeaderWrapper>
  );
};

export default docMarkdownDefaultPage;